<template>
  <div v-if="innerForm">
    <el-form  ref="innerForm" :model="innerForm" label-width="110px">
      <el-row type="flex" justify="space-between">
        <el-col :span="10">
          <el-form-item label="企业" prop="orgName">
            <el-select
              disabled
              v-model="innerForm.orgName"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in options"
                :key="index"
                :label="item.orgName"
                :value="item.orgNo"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :pull="2" :span="10">
          <el-form-item :label="'月份：'" :prop="'month'">
            <el-date-picker
              v-model="innerForm['month']"
              :type="'month'"
              :placeholder="'请选择月份'"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="10">
          <el-form-item label="户名" prop="customerName">
            <el-input v-model="innerForm.customerName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :pull="2" :span="10">
          <el-form-item label="户号" prop="customerNo">
            <el-input v-model="innerForm.customerNo"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="10">
          <el-form-item label="地址" prop="address">
            <el-input v-model="innerForm.address"></el-input>
          </el-form-item>
        </el-col>
        <el-col :pull="2" :span="10">
          <el-form-item label="市场化属性" prop="marketizationAttributeName">
            <el-select
              v-model="innerForm.marketizationAttribute"
              placeholder="请选择"
            >
              <el-option
                v-for="item in SCHSX"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="10">
          <el-form-item label="计费方式" prop="declareWayName">
            <el-select v-model="innerForm.declareWay" placeholder="请选择">
              <el-option
                v-for="item in JFFS"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :pull="2" :span="10">
          <el-form-item label="联系人" prop="contactName">
            <el-input v-model="innerForm.contactName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="10">
          <el-form-item label="联系电话" prop="contactPhone">
            <el-input v-model="innerForm.contactPhone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :pull="2" :span="10">
          <el-form-item label="总电量" prop="ecValueMT">
            <el-input class="kWh" v-model="innerForm.ecValueMT"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="10">
          <el-form-item label="尖电量" prop="ecValueMF1">
            <el-input class="kWh" v-model="innerForm.ecValueMF1"></el-input>
          </el-form-item>
        </el-col>
        <el-col :pull="2" :span="10">
          <el-form-item label="峰电量" prop="ecValueMF2">
            <el-input class="kWh" v-model="innerForm.ecValueMF2"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="10">
          <el-form-item label="平电量" prop="ecValueMF3">
            <el-input class="kWh" v-model="innerForm.ecValueMF3"></el-input>
          </el-form-item>
        </el-col>
        <el-col :pull="2" :span="10">
          <el-form-item label="谷电量" prop="ecValueMF4">
            <el-input class="kWh" v-model="innerForm.ecValueMF4"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="10">
          <el-form-item label="总电费" prop="totalCharge">
            <el-input
              class="yuan"
              v-model.number="innerForm.totalCharge"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :pull="2" :span="10">
          <el-form-item label="电度电费" prop="degreeCharge">
            <el-input
              class="yuan"
              v-model.number="innerForm.degreeCharge"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="10">
          <el-form-item label="基本电费" prop="basicCharge">
            <el-input
              class="yuan"
              v-model.number="innerForm.basicCharge"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :pull="2" :span="10">
          <el-form-item label="力调电费" prop="adjustCharge">
            <el-input
              class="yuan"
              v-model.number="innerForm.adjustCharge"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="10">
          <el-form-item label="平均电价" prop="avgPrice">
            <el-input
              class="yuan"
              v-model.number="innerForm.avgPrice"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :pull="2" :span="10">
          <el-form-item label="用户星级" prop="userStarRating">
            <el-select v-model="innerForm.userStarRating" placeholder="请选择用户星级">
              <el-option
                v-for="item in starList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item label="用电概况建议" prop="elecUseSuggest">
            <el-input
              type="textarea"
              resize="none"
              v-model="innerForm.elecUseSuggest"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="10">
          <el-form-item label="运行容量" prop="runCapacity">
            <el-input class="kVA" v-model="innerForm.runCapacity"></el-input>
          </el-form-item>
        </el-col>
        <el-col :pull="2" :span="10">
          <el-form-item label="最大需量" prop="maxDemand">
            <el-input class="kW" v-model="innerForm.maxDemand"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item label="基本电费建议" prop="basicChargeSuggest">
            <el-input
              type="textarea"
              resize="none"
              v-model="innerForm.basicChargeSuggest"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="10">
          <el-form-item label="功率因数" prop="pft">
            <el-input v-model="innerForm.pft"></el-input>
          </el-form-item>
        </el-col>
        <el-col :pull="2" :span="10"> </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item label="力调电费建议" porp="adjustChargeSuggest">
            <el-input
              type="textarea"
              resize="none"
              v-model="innerForm.adjustChargeSuggest"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item label="购电分析建议" prop="purchaseAnalysisSuggest">
            <el-input
              type="textarea"
              resize="none"
              v-model="innerForm.purchaseAnalysisSuggest"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="10">
          <el-form-item label="建议新装光伏容量" prop="addPhotovoltaicCapacity">
            <el-input
              class="kVA"
              v-model="innerForm.addPhotovoltaicCapacity"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :pull="2" :span="10">
          <el-form-item label="可消纳电量" prop="consumptionEpower">
            <el-input
              class="kWh"
              v-model="innerForm.consumptionEpower"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="10">
          <el-form-item label="节省总电费" prop="economizeTotalCharge">
            <el-input
              class="yuan"
              v-model="innerForm.economizeTotalCharge"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :pull="2" :span="10">
          <el-form-item label="节省基本电费" prop="economizeBasicCharge">
            <el-input
              class="yuan"
              v-model="innerForm.economizeBasicCharge"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="10">
          <el-form-item label="节省电度电费" prop="economizeDegreeCharge">
            <el-input
              class="yuan"
              v-model="innerForm.economizeDegreeCharge"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :pull="2" :span="10">
          <el-form-item label="优化后平均电价" prop="optimizeAvgPrice">
            <el-input
              class="yuan-kWh"
              v-model="innerForm.optimizeAvgPrice"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item label="电量建议" prop="epowerSuggest">
            <el-input
              type="textarea"
              resize="none"
              v-model="innerForm.epowerSuggest"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item label="绿电建议" prop="greenElecSuggest">
            <el-input
              type="textarea"
              resize="none"
              v-model="innerForm.greenElecSuggest"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="text-align: center">
        <el-button type="primary" @click="submit">保 存</el-button>
        <el-button type="primary" @click="view">预 览</el-button>
      </el-row>
    </el-form>
    <el-dialog
      :visible.sync="mVisible"
      width="1300px"
      :modal='false'
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :center="true"
    >
      <MReport :data="innerForm" />
    </el-dialog>
    <div id="dianfei" style="width: 450px; height: 350px; display: none"></div>
    <div id="zhanbi" style="width: 300px; height: 250px; display: none"></div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import * as echarts from 'echarts'
import MReport from '@/views/Report/components/MReport'
import { getSelect } from '@/api/monReport'
export default {
  name: 'editDialogFrom',
  props: ['formItem'],
  components: { MReport },
  data () {
    return {
      innerForm: {},
      options: [],
      SCHSX: [],
      JFFS: [],
      mVisible: false,
      options1: {},
      options2: {},
      Chart1: null,
      Chart2: null,
      starList: [
        { value: '1', label: '一星用户' },
        { value: '2', label: '二星用户' },
        { value: '3', label: '三星用户' },
        { value: '4', label: '四星用户' },
        { value: '5', label: '五星用户' }
      ]
    }
  },
  async created () {
    const res = await getSelect({ dictType: 'Asset_SCHSX' })
    const res1 = await getSelect({ dictType: 'Asset_SBFS' })
    this.SCHSX = res.data.list
    this.JFFS = res1.data.list
    console.log(this.SCHSX)
    console.log(this.JFFS)
  },
  watch: {
    formItem: {
      handler (newVal) {
        console.log(newVal)
        this.innerForm = JSON.parse(JSON.stringify(newVal))
      },
      deep: true,
      immediate: true
    },
    'innerForm.month': {
      handler (newVal) {
        this.innerForm.month = dayjs(newVal).format('YYYY-MM')
      }
    },
    'innerForm.year': {
      handler (newVal) {
        this.innerForm.year = dayjs(newVal).format('YYYY')
      }
    },
    'innerForm.declareWay': {
      handler (newVal) {
        if (this.innerForm.declareWay) {
          this.innerForm.declareWayName = this.JFFS.find(
            (item) => item.value === newVal
          ).text
        }
      }
    },
    'innerForm.marketizationAttribute': {
      handler (newVal) {
        if (this.innerForm.marketizationAttribute) {
          this.innerForm.marketizationAttributeName = this.SCHSX.find(
            (item) => item.value === newVal
          ).text
        }
      }
    }
  },
  computed: {
    zhanbi () {
      return (
        ((this.innerForm.ecValueMF1 + this.innerForm.ecValueMF2) /
          this.innerForm.ecValueMT) *
        100
      ).toFixed(2)
    }
  },
  mounted () {
    this.myChart1()
    this.myChart2()
  },
  methods: {
    submit () {
      this.$nextTick(() => {
        this.myChart1()
        this.myChart2()
      })
      this.$emit('editSubmit', this.innerForm)
    },
    view () {
      if (this.Chart1) {
        // 销毁echarts实例
        this.Chart1.dispose()
        this.Chart1 = null // 可选的，将实例置为null
        this.myChart1()
      }
      if (this.Chart2) {
        // 销毁echarts实例
        this.Chart2.dispose()
        this.Chart2 = null // 可选的，将实例置为null
        this.myChart2()
      }
      setTimeout(() => {
        this.setImg()
        this.mVisible = true
      }, 1000)
    },
    myChart1 () {
      this.Chart1 = echarts.init(document.getElementById('dianfei'))
      this.options1 = {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            data: [
              {
                value: this.innerForm.degreeCharge,
                name: `电度电费${this.innerForm.degreeCharge}`
              },
              {
                value: this.innerForm.basicCharge,
                name: `基本电费${this.innerForm.basicCharge}`
              },
              {
                value: this.innerForm.adjustCharge,
                name: `力调电费${this.innerForm.adjustCharge}`
              }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      this.Chart1.setOption(this.options1)
    },
    myChart2 () {
      this.Chart2 = echarts.init(document.getElementById('zhanbi'))
      this.options2 = {
        series: [
          {
            type: 'pie',
            radius: ['60%', '70%'],
            avoidLabelOverlap: false,
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [{ value: this.zhanbi }, { value: 100 - this.zhanbi }],
            color: ['#1684fc', '#e8e8e8']
          }
        ]
      }
      this.Chart2.setOption(this.options2)
    },
    setImg () {
      this.$set(this.innerForm, 'chartCharge', this.createBase64('#dianfei'))
      this.$set(this.innerForm, 'chartEpowerJfzb', this.createBase64('#zhanbi'))
    },
    createBase64 (ele) {
      const docEle = ele + ' canvas'
      const canvasFixed = document.querySelector(docEle)
      const // 获取图表元素
        canvasWidth = canvasFixed.width
      const // 获取图表元素宽度
        canvasHeigth = canvasFixed.heigth
      const // 获取图表元素高度
        canvas2D = canvasFixed.getContext('2d')
      canvas2D.drawImage(canvasFixed, canvasWidth, canvasHeigth)
      return canvasFixed.toDataURL()
    }
  }
}
</script>

<style lang="scss" scoped>
.kWh {
  position: relative;
  &::after {
    content: "kWh";
    position: absolute;
    top: 0;
    right: -40px;
  }
}
.yuan {
  position: relative;
  &::after {
    content: "元";
    position: absolute;
    top: 0;
    right: -40px;
  }
}
::v-deep .el-textarea__inner {
  height: 100px;
}
.kVA {
  position: relative;
  &::after {
    content: "kVA";
    position: absolute;
    top: 0;
    right: -40px;
  }
}
.kW {
  position: relative;
  &::after {
    content: "kW";
    position: absolute;
    top: 0;
    right: -40px;
  }
}
.yuan-kWh {
  position: relative;
  &::after {
    content: "元/kWh";
    position: absolute;
    top: 0;
    right: -60px;
  }
}
</style>
